import React, { Component } from 'react'

import { Carousel } from 'antd-mobile';




//   import  axios from  'axios' 

import {reqSwiper} from '../../utils/index'

export default class Swiper extends Component {


    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }


    componentDidMount() {
        this.getSwiper()
    }

    getSwiper = async () => {
        // let swiperData = await fetch('http://e.ludir.cn:8081/home/swiper').then(res=>{
        //     return res.json()
        // })


        // let swiperData = await fetch('http://e.ludir.cn:8081/home/swiper').then(res=>res.json())
        // // console.log(swiperData)
        // this.setState({
        //     data: swiperData.body
        // })

         let swiperData = await reqSwiper()
        console.log('swiperData',swiperData)

        this.setState({
            data: swiperData.body
        })

    }


    renderImg() {

        return (
            this.state.data.map(val => (
                <a
                    key={val}
                    href="http://www.baidu.com"
                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                    <img
                        src={`http://e.ludir.cn:8081${val.imgSrc}`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                        }}
                    />
                </a>
            ))
        )

    }




    render() {
        return (
            <div>
                <Carousel autoplay infinite   >
                    {this.renderImg()}
                </Carousel>






            </div>
        )
    }
}
